<template>
    <div class="module-content">
        <el-card class="!border-none cardArticle">
            <div class="detail-page-main-box-table">
                <div class="mb-4">
                    <router-link :to="`/RMS/article/edit?mode=add&family_id=${route.query.family_id}`">
                        <el-button type="primary" >
                            发布新文章
                        </el-button>
                    </router-link>
                </div>
                <el-table :data="pager.lists" size="large" border >
                    <el-table-column label="文章标题" prop="title" min-width="320" />
                    <el-table-column label="发布时间" prop="create_time" min-width="180" />
                    <el-table-column label="类型" prop="type" min-width="160" >
                        <template #default="{ row }">
                            <span>{{ row.type == 1 ? '动态' : '文化' }}</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="状态" prop="status" min-width="60" >
                        <template #default="{ row }">
                            <el-tag v-if="row.status == 1" type="success">正常</el-tag>
                            <el-tag v-else type="danger">禁用</el-tag>
                        </template>
                    </el-table-column> -->
                    <el-table-column label="操作" width="160" fixed="right">
                        <template #default="{ row }">
                            <router-link :to="`/RMS/article/edit?id=${row.id}&mode=edit&family_id=${route.query.family_id}`">
                                <el-button link type="primary">
                                    编辑
                                </el-button>
                            </router-link>
                            <router-link :to="`/RMS/article/edit?id=${row.id}&mode=view&family_id=${route.query.family_id}`">
                                <el-button type="primary" link >
                                    查看
                                </el-button>
                            </router-link>
                            <el-button type="danger" link @click="handleDeleteArticle(row)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" ref="paginationRef" />
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { article_list, del_article } from '@/api/family';
import { usePaging } from '@/hooks/usePaging'
import feedback from '@/utils/feedback';
import router from '@/install/plugins/router';


const route = useRoute()
const props = defineProps({
    family_id: {
        type: Number,
        default: 0
    }
})


const handleDeleteArticle = (row: any) => {
    ElMessageBox.confirm(`确定要删除文章 "${row.title}" 吗？`, '确认删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then( async () => {
        await del_article({id: row.id})
        await feedback.msgSuccess('删除成功')
        await getLists()
    })
}



// 文章管理数据
const queryParams = ref({
    family_id: route.query.family_id
})
const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: article_list,
    params: queryParams.value
})
// 获取家族馆列表
getLists()
</script>

<style scoped>
.module-content {
    border-radius: 8px;
    overflow: hidden;
}

.module-header {
    padding: 20px;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.module-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.table-container {
    padding: 0 20px 20px;
}
.cardArticle{
    box-shadow: none;
}
</style>